<template>
  <div class="conten">
    <div class="prompt">
      <p>{{$t('monitor.tip')}}</p>
      <p>当日提交的批量下载任务，会在次日凌晨3时生成压缩包。单个任务最大支持打包10000条录音。生成的压缩包30天内有效。如果导出任务超期未下载，导出进度会显示“已失效”</p>
    </div>
    <affix :label="$t('qualityCheck.condition')"></affix>
    <el-form>
      <el-form-item :label="$t('call.bAndETime')">
        <el-date-picker v-model="rangeTime"
                        type="datetimerange"
                        size="mini"
                        :editable = "false"
                        :picker-options="pickerOptions"
                        id="callExportPicker"
                        :placeholder="$t('public.timeRanges')"></el-date-picker></el-form-item>
      <el-form-item class="btn-group">
        <el-button @click = "rest"
                   class="primary_btn">{{$t('public.reset')}}</el-button>
        <el-button type="primary"
                   @keyup.native.enter="search"
                   @click="getTableList1"
                   class="primary_btn">{{$t('public.search2')}}</el-button></el-form-item>
    </el-form>
    <affix :label="$t('call.queryResult')"></affix>
    <batch-export-list :data = "tableData"
                       :tableLoading = "tableLoading"
                       :currentPage = "currentPage"
                       @cancelTask = "cancelTask"
                       @turnPage = "turnPage"></batch-export-list>
  </div>
</template>
<script>
  // 此组件是批量导出录音任务管理
  import Pagination from '@/components/public-modules/card/Pagination'
  import affix from '../../ui-modules/affix/Affix.vue'
  import BatchExportList from '@/components/public-modules/batch-export-list/RecordingExportTabel.vue'
  import {getDateTime, getCache} from '@/utils/m7Utils.js'
  export default {
    data () {
      return {
        exportTaskLimit: {},
        isSearch: false,
        tableData: {},
        tableLoading: false,
        currentPage: 1,
        pickerOptions: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        rangeTime: []
      }
    },
    methods: {
      cancelTask (id) {
        let data = {'_id': id, type: 'offLine'}
        this.$confirm(this.$t('call.confirmCancelTaskSuc'),  this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteCallSheetExportTask', data).then(resp => {
            if (resp.success) {
              this.$message.success(this.$t('call.cancelTaskSuc'))
              this.getTableList1()
            }
          })
        })
      },
      getTableList1 () { // 查询
        this.isSearch = true
        if (this.currentPage === 1) {
          this.isSearch = false
        }
        this.currentPage = 1
        this.getTableList()
      },
      turnPage (val) { // 翻页
        this.currentPage = val
        if (this.isSearch && val < 2) {
          this.isSearch = false
          return
        }
        this.getTableList()
      },
      rest () {
        // 重置为[]: 如果为'' getDateTime()会报一个ERROR
        this.rangeTime = []
      },
      dealData (obj) {
        obj.list.map(item => {
          item.statusName = '--'
          item.typeName = '--'
          item.operate = ''
          if (item.status === 'ready') { // 等待压缩的时候可以取消任务
            // item.statusName = '等待压缩'
            item.statusName = this.$t('webchat.exportWaitProcessing')
            item.operate = this.$t('call.cancelTask')
            item.class = 'exportProcessing'
          } else if (item.status === 'failure') { // 导出失败
            item.statusName = this.$t('webchat.exportError')
            item.class = 'exportError'
          } else if (item.status === 'success' || item.status === 'exportSuccess') { // 导出成功的时候可以下载
            item.statusName = this.$t('webchat.exportSuccess')
            item.class = 'exportSuccess'
            item.operate = this.$t('public.download')
          } else if (item.status === 'expired') { // 已失效
            item.statusName = this.$t('webchat.exportFailure')
            item.class = 'exportError'
          } else if (item.status === 'wait') {
            item.statusName = this.$t('webchat.exportProcessing')
            item.class = 'exportProcessing'
          } else if (item.status === 'export') {
            item.statusName = this.$t('webchat.exportOuting')
            item.class = 'exportProcessing'
          }
          if (item.type === 'callSheet') {
            item.typeName = this.$t('public.call')
          } else if (item.type === 'customerCdr') {
            item.typeName = this.$t('public.customer')
          }
          if (item.creator) {
            let createUser = getCache('agents', item.creator)
            let displayName = createUser.displayName || '--'
            let exten = createUser.exten || '--'
            item.createUser = displayName + '[' + exten + ']'
          } else {
            item.createUser = '--[--]'
          }
        })
        return obj
      },
      // 获取导出结果的数据, 此处需判断是否选择时间进行查询，如没有则不传"BEGIN_TIME"，"END_TIME"参数，
      // val默认为 1, 当前组件只有子组件传递翻页请求的时候才会改变val值
      getTableList () {
        let data = {
          page: this.currentPage,
          pageSize: 10,
          BEGIN_TIME: '',
          END_TIME: '',
          type: 'offLine'
        }
        if (this.rangeTime && this.rangeTime[0]) {
          data.BEGIN_TIME = getDateTime(this.rangeTime[0])
          data.END_TIME = getDateTime(this.rangeTime[1])
        } else {
          delete data.BEGIN_TIME
          delete data.END_TIME
        }
        this.tableLoading = true
        this.$store.dispatch('getCallSheetExportTaskList', data).then(resp => {
          if (resp && resp.success) {
            this.tableData = this.dealData(resp)
            this.tableLoading = false
          } else {
            this.tableLoading = false
          }
        })
      }
    },
    computed: {
      isRealTimeExport () {
        return this.$store.state.isRealTimeExport
      }
    },
    components: {
      Pagination,
      affix,
      BatchExportList
    },
    mounted () {
      this.exportTaskLimit = this.$getCache('exportTaskLimit') || {}
      this.getTableList(1)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../assets/common.styl"
    .conten
      padding 0px 16px 20px
      .ui-affix
        margin-top 32px
        padding-bottom 10px
      .el-form
        padding-left 16px
        .btn-group
          text-align right
      .prompt
        color $c-prompt
        margin-bottom 10px
</style>
